<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <div class="card-body">
        <el-table
          :data="tableData"
          style="width: 100%"
          row-key="fakeId"
          :row-class-name="tableRowClassName"
          border
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @selection-change="handleSelectionChange"
          ref="subjectTreeTable">
          <el-table-column
            align="left"
            prop="itemName"
            label="责任分解项"
            width="300">
            <template slot-scope="scope">
              <span v-if="scope.row.isOpinion">{{scope.row.itemName}}</span>
              <a style="cursor:pointer;text-decoration: underline" @click="itemDetail(scope.row.id)"
                 v-if="!scope.row.isOpinion">{{scope.row.itemName}}</a>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createUnit"
            label="反馈部门"
            width="180">
          </el-table-column>
          <el-table-column
            align="center"
            prop="opinionContent"
            label="修改意见"
            show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            width="100">
            <template slot="header" slot-scope="scope">
              <span>操作</span>
            </template>
            <template slot-scope="scope">
              <div class="menu-title" @click.stop="viewLevyDeptAll(scope.row,scope.index)"
                   v-if="!scope.row.isOpinion">
                <i class="iconfont iconalter icon-warning"></i>
                <p class="menu-title-text">修改</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 20, 30, 40 ,50]"
            :current-page="page.currentPage"
            :page-size="page.pageSize"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
            class="paginationcss">
          </el-pagination>
        </div>
        <div style="float:left; margin: 44px 0px -17px 10px;">
          <h3>其他意见 : </h3>
        </div>
        <avue-crud :data="otherOpninionListData"
                   :option="otherOpninionTableOption"
                   :page="otherOpninionPage"
                   :table-loading="otherOpninionTableLoading"
                   @on-load="getOtherOpninionList"
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   class="avuecrud">
          <template slot-scope="scope" slot="menu">
            <div class="menu-title" @click.stop="viewOpinion(scope.row,scope.index)"
                 v-if="scope.row.state!='0'&&scope.row.state!='1'">
              <i class="iconfont iconview icon-primary"></i>
              <p class="menu-title-text">查看意见</p>
            </div>
          </template>
        </avue-crud>
      </div>


      <!--反馈详情弹窗-->
      <el-dialog title="修改" :visible.sync="editNormFormVisible" width="70%">
        <el-form
          label-width="130px"
          :model="editNormForm"
          style="padding-right: 30px;"
          :rules="editNormFormRules"
          ref="editNormForm"
        >
          <el-row>
            <el-col :span="16">
              <el-form-item required="true" label="牵头部门 :" prop="mainDeptName" class="form-item">
                <span style="font-size: 16px">{{editNormForm.mainDeptName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 10px;"
                         @click="clickMainDept">选择牵头部门
              </el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item required="true" label="配合部门 :" prop="assortDeptName" class="form-item">
                <span style="font-size: 16px">{{editNormForm.assortDeptName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 10px;"
                         @click="clickAssortDept">选择配合部门
              </el-button>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmNormForm()">确 定</el-button>
          <el-button @click="editNormFormVisible=false">取 消</el-button>
        </div>
      </el-dialog>
      <!--牵头单位部门选择-->
      <dept-select :visible="deptVisible" @getSelectInfo="getSelectInfo" @cancel="cancelDept"></dept-select>
      <dept-check :visible="supportDeptVisible" @getCheckInfo="getSupportDeptCheckInfo"
                  @cancel="cancelSupportDept"></dept-check>

      <!--分解项详情弹窗-->
      <el-dialog title="详情" :visible.sync="itemDetailVisible" width="70%">
        <div style="margin-left: 9px; margin-top: -70px;">
          <bostech-detail :detail-data="itemDetailData"></bostech-detail>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="itemDetailVisible=false">关 闭</el-button>
        </div>
      </el-dialog>
      <!--反馈详情弹窗-->
      <el-dialog title="反馈详情" :visible.sync="dialogVisible" width="70%">
        <div style="margin-top: -48px">
          <bostech-detail :detail-data="detailData"></bostech-detail>
          <div style="margin-top: 15px;margin-left: 31px;display: flex;">
            <span style="font-weight: 600;display: block;width: 280px">附件 ：</span>
            <div style="display:flex;flex-wrap: wrap;">
              <div v-for="fileid in files" :key="fileid">
                <preview :attachementId="fileid" v-if="fileid"></preview>
              </div>
            </div>
            <p class="detail-data-file" v-if="files.length==0">无</p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
  import {getOpinionBackTreeList, formOpinion, agreeOpinion} from "@/api/opinion";
  import {getItemTreeList, modifyDecomposition, decomposeItemDetail, getOtherOpninionList} from "@/api/pim/pim";
  import {getNotNull, getFileTypeFiles} from '@/views/util';
  import {ITEM_OPINION_DIC} from "@/const/dict";
  import fileTypeMixin from "@/mixins/fileTypeMixin";

  export default {
    name: "collectionListProgram",
    mixins: [fileTypeMixin],

    created() {
      this.putTableData();
      window.itemDetail = this.itemDetail;
    },
    data() {
      return {
        headerData: {
          title: '分解方案-征求意见'
        },
        typetemp: '',
        stateControlBtn: '',
        tableData: [],
        dialogVisible: false,//反馈详情弹窗
        detailData: [],//反馈详情
        targetIdTemp: 0,//用于采纳，不采纳，退回修改操作中传参
        files: [],//用于查看反馈详情的附件显示
        stateControlBtnBack: false,//用于查看反馈中处理按钮的显示
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 2 // 每页显示多少条
        },
        editNormFormVisible: false,
        editNormForm: {
          mainDeptName: '',
          assortDeptName: '',
          leadDeptId: '',
          cooDeptId: '',
        },
        editNormFormRules: {
          mainDeptName: [
            {required: true, message: "请选择牵头部门", trigger: "blur"}
          ],
          assortDeptName: [
            {required: true, message: "请选择配合部门", trigger: "blur"}
          ],
        },
        deptVisible: false,
        supportDeptVisible: false,
        modifyId: '',
        itemDetailVisible: false,
        itemDetailData: [],
        otherOpninionListData: [],
        otherOpninionTableOption: {
          page: true,
          menuWidth: 120,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: false,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          menu: true,
          searchBtn: false,
          keyId: "id",
          column: [
            {
              label: "反馈部门",
              prop: "targetDeptName",
              width: 100,
              cell: true
            },
            {
              label: "其他意见",
              prop: "showOpinion",
              overHidden: true,
              cell: true
            },
            {
              label: "联系人",
              prop: "showContact",
              width: 100,
              cell: true
            },
            {
              label: "联系电话",
              prop: "showContactPhone",
              width: 180,
              cell: true
            },
            {
              label: "状态",
              prop: "state",
              width: 120,
              cell: true,
              dicData: ITEM_OPINION_DIC.TYPE,
            },

          ]
        },
        otherOpninionPage: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10, // 每页显示多少条
        },
        otherOpninionTableLoading: false,


        formatterState: function (row, value, label, column) {
          if (row.state == '0') {
            return "催办";
          } else if (row.state == '1') {
            return "待反馈";
          } else if (row.state == '2') {
            return "退回";
          } else if (row.state == '3') {
            return "不采纳";
          } else if (row.state == '4') {
            return "已反馈";
          } else if (row.state == '5') {
            return "已采纳";
          }
        },
      }
    },
    methods: {
      putTableData() {
        getItemTreeList(Object.assign({
          current: 1,
          size: 10,
          draftId: this.$route.params.id,
        })).then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
        })
      },
      tableRowClassName({row, rowIndex}) {
        if (row.state == undefined) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        var page = this.page;
        page.pageSize = val;
        this.pageputTableData(page);
      },
      handleCurrentChange(val) {
        var page = this.page;
        page.currentPage = val;
        this.pageputTableData(page);
      },
      pageputTableData(page) {
        getItemTreeList(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          draftId: this.$route.params.id,
        })).then(response => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
        })
      },
      //修改分解项弹窗
      viewLevyDeptAll(row) {
        this.editNormFormVisible = true;
        this.modifyId = row.id;
      },
      // 弹出选择牵头部门弹框
      clickMainDept() {
        this.deptVisible = true
      },
      cancelDept(deptIds, deptNames) {
        this.deptVisible = false;
      },
      getSelectInfo(deptId, deptName) {
        this.editNormForm.mainDeptName = deptName;
        this.editNormForm.leadDeptId = deptId;
        this.deptVisible = false;
      },
      //弹出选择配合部门弹框
      clickAssortDept() {
        this.supportDeptVisible = true;
      },
      cancelSupportDept() {
        this.supportDeptVisible = false;
      },
      getSupportDeptCheckInfo(deptIds, deptNames) {
        this.editNormForm.assortDeptName = deptNames;
        this.editNormForm.cooDeptId = deptIds;
        this.supportDeptVisible = false;
      },
      confirmNormForm() {
        this.$refs.editNormForm.validate(valid => {
          if (valid) {
            this.$confirm("确定修改吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              modifyDecomposition(this.modifyId, this.editNormForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: "成功",
                    message: "修改成功",
                    type: "success",
                    duration: 2000
                  });
                  this.editNormFormVisible = false;
                }
              })
            })
          }
        })
      },
      itemDetail(id) {
        if (id != null && id != '') {
          decomposeItemDetail(id).then(response => {
            var records = response.data.data;
            switch (records.type) {
              case '1':
                this.itemDetailData = [
                  {label: '指标名称', value: getNotNull(records.itemName)},
                  {label: '指标内容', value: getNotNull(records.description)},
                  {label: '牵头部门', value: records.leadDeptName},
                  {label: '配合部门', value: records.cooDeptNameList.join('')},
                  {label: '起止日期', value: records.startDate + '-' + records.endDate},
                  {label: '总目标', value: getNotNull(records.totalTarget + records.totalTargetUnit)},
                  {label: '基数', value: getNotNull(records.base)},
                  {label: '年均增长', value: getNotNull(records.yearAverageRise)},
                  {label: '属性', value: getNotNull(records.attribute)},
                  {label: '是否可量化', value: this.quantifiableDic(records.quantifiable)},
                  {label: '分类', value: this.classifyDic(records.classify)},
                  {label: '上报周期', value: getNotNull('年报')},
                ];
                break;
              case '2':
                this.itemDetailData = [
                  {label: '任务名称', value: getNotNull(records.itemName)},
                  {label: '任务内容', value: getNotNull(records.description)},
                  {label: '牵头部门', value: records.leadDeptName},
                  {label: '配合部门', value: records.cooDeptNameList.join('')},
                  {label: '上报周期', value: getNotNull('年报')},
                ];
                break;
              case '3':
                this.itemDetailData = [
                  {label: '项目名称', value: getNotNull(records.itemName)},
                  {label: '项目内容', value: getNotNull(records.description)},
                  {label: '牵头部门', value: records.leadDeptName},
                  {label: '配合部门', value: records.cooDeptNameList.join('')},
                  {label: '起止日期', value: records.startDate + '-' + records.endDate},
                  {label: '总目标', value: getNotNull(records.totalTarget + records.totalTargetUnit)},
                  {label: '是否可量化', value: this.quantifiableDic(records.quantifiable)},
                  {label: '上报周期', value: getNotNull('年报')},
                ];
                break;
            }
          })
        }
        this.itemDetailVisible = true;
      },
      getOtherOpninionList(page) {
        getOtherOpninionList(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          relateId: this.$route.params.id,
          type: '7',
        })).then(response => {
          this.otherOpninionListData = response.data.data.records;
          this.otherOpninionPage.total = response.data.data.total;
        })
      },
      currentChange(currentPage) {
        var page = this.page;
        page.currentPage = currentPage;
        this.getOtherOpninionList(page);
      },
      sizeChange(pageSize) {
        var page = this.page;
        page.pageSize = pageSize;
        this.getOtherOpninionList(page);
      },
      //查看反馈弹出反馈的详情
      viewOpinion(row) {
        formOpinion(Object.assign({
          opinionId: row.opinionId,
          targetId: row.targetId,
        })).then(async response => {
          var records = response.data.data.records[0];
          this.detailData = [
            {label: '其他意见', value: getNotNull(records.opinion)},
            {label: '联系人', value: getNotNull(records.contactName)},
            {label: '联系电话', value: getNotNull(records.contactNumber)},
          ];
          if (records.fileIds.length != 0) {
            this.files = records.fileIds;
          }
        });
        this.dialogVisible = true;

      },
      quantifiableDic(val) {
        switch (val) {
          case true:
            return '是';
            break;
          case false:
            return '否';
            break;
          default:
            return '无';
            break;
        }
      },
      classifyDic(val) {
        switch (val) {
          case '1':
            return '经济发展';
            break;
          case '2':
            return '创新驱动';
            break;
          case '3':
            return '民生福祉';
            break;
          case '4':
            return '资源环境';
            break;
          default:
            return '无';
            break;
        }
      },


    }
  }
</script>

<style lang="scss" scoped>
  .card-body {
    padding: 10px;
    min-height: 400px;
    padding-bottom: 65px;
  }

  .paginationcss {
    margin-top: 20px;
    float: right;
    margin-right: 28px;
  }
</style>
